{% extends "admin/layout.html" %}

{% block title %}{% if flow %}编辑{% else %}创建{% endif %}审批流程 - {{ super() }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{% if flow %}编辑审批流程{% else %}创建审批流程{% endif %}</h1>
</div>

<div class="card shadow-sm">
    <div class="card-body">
        <form method="post">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="name" class="form-label">流程名称</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ flow.name if flow }}" required>
                </div>
                <div class="col-md-6">
                    <label for="department_id" class="form-label">关联部门</label>
                    <select class="form-select" id="department_id" name="department_id">
                        <option value="">-- 选择部门 (可选) --</option>
                        {% for dept in departments %}
                        <option value="{{ dept.id }}" {% if flow and flow.department_id == dept.id %}selected{% endif %}>{{ dept.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>

            <div class="mb-3">
                <label for="description" class="form-label">流程描述</label>
                <textarea class="form-control" id="description" name="description" rows="3">{{ flow.description if flow }}</textarea>
            </div>

            <div class="form-check mb-3">
                <input class="form-check-input" type="checkbox" id="is_default" name="is_default" {% if flow and flow.is_default %}checked{% endif %}>
                <label class="form-check-label" for="is_default">设为默认审批流程</label>
            </div>

            <hr>

            <h5 class="mb-3">审批步骤</h5>
            <div id="steps-container">
                {% if flow and flow.steps %}
                    {% for step in flow.steps|sort(attribute='order') %}
                    <div class="step-item card mb-3">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-1">
                                    <label class="form-label">序号</label>
                                    <input type="number" class="form-control" name="step_order" value="{{ step.order }}" min="1" required>
                                </div>
                                <div class="col-md-5">
                                    <label class="form-label">审批人</label>
                                    <select class="form-select" name="step_user_id" required>
                                        <option value="">-- 选择审批人 --</option>
                                        {% for member in members %}
                                        <option value="{{ member.id }}" {% if step.user_id == member.id %}selected{% endif %}>{{ member.name }} - {{ member.department.name if member.department }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check mt-4 pt-2">
                                        <input class="form-check-input" type="checkbox" name="step_require_comment_{{ loop.index0 }}" id="require_comment_{{ loop.index0 }}" {% if step.require_comment %}checked{% endif %}>
                                        <label class="form-check-label" for="require_comment_{{ loop.index0 }}">必须填写审批意见</label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-danger mt-4 remove-step">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                <div class="step-item card mb-3">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-1">
                                <label class="form-label">序号</label>
                                <input type="number" class="form-control" name="step_order" value="1" min="1" required>
                            </div>
                            <div class="col-md-5">
                                <label class="form-label">审批人</label>
                                <select class="form-select" name="step_user_id" required>
                                    <option value="">-- 选择审批人 --</option>
                                    {% for member in members %}
                                    <option value="{{ member.id }}">{{ member.name }} - {{ member.department.name if member.department }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-4">
                                <div class="form-check mt-4 pt-2">
                                    <input class="form-check-input" type="checkbox" name="step_require_comment_0" id="require_comment_0">
                                    <label class="form-check-label" for="require_comment_0">必须填写审批意见</label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger mt-4 remove-step">删除</button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>

            <button type="button" id="add-step" class="btn btn-secondary mb-3">
                <i class="fas fa-plus"></i> 添加审批步骤
            </button>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">保存</button>
                <a href="{{ url_for('approval.flow_list') }}" class="btn btn-secondary">取消</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let stepCount = {{ flow.steps|length if flow else 1 }};

    // 添加步骤
    document.getElementById('add-step').addEventListener('click', function() {
        stepCount++;
        const newStep = document.createElement('div');
        newStep.className = 'step-item card mb-3';
        newStep.innerHTML = `
            <div class="card-body">
                <div class="row">
                    <div class="col-md-1">
                        <label class="form-label">序号</label>
                        <input type="number" class="form-control" name="step_order" value="${stepCount}" min="1" required>
                    </div>
                    <div class="col-md-5">
                        <label class="form-label">审批人</label>
                        <select class="form-select" name="step_user_id" required>
                            <option value="">-- 选择审批人 --</option>
                            {% for member in members %}
                            <option value="{{ member.id }}">{{ member.name }} - {{ member.department.name if member.department }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check mt-4 pt-2">
                            <input class="form-check-input" type="checkbox" name="step_require_comment_${stepCount-1}" id="require_comment_${stepCount-1}">
                            <label class="form-check-label" for="require_comment_${stepCount-1}">必须填写审批意见</label>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger mt-4 remove-step">删除</button>
                    </div>
                </div>
            </div>
        `;
        document.getElementById('steps-container').appendChild(newStep);

        // 为新添加的删除按钮添加事件监听
        newStep.querySelector('.remove-step').addEventListener('click', function() {
            this.closest('.step-item').remove();
            // 重新排序步骤序号
            const steps = document.querySelectorAll('.step-item');
            steps.forEach((step, index) => {
                step.querySelector('input[name="step_order"]').value = index + 1;
            });
            stepCount = steps.length;
        });
    });

    // 删除步骤
    document.querySelectorAll('.remove-step').forEach(button => {
        button.addEventListener('click', function() {
            if (document.querySelectorAll('.step-item').length > 1) {
                this.closest('.step-item').remove();
                // 重新排序步骤序号
                const steps = document.querySelectorAll('.step-item');
                steps.forEach((step, index) => {
                    step.querySelector('input[name="step_order"]').value = index + 1;
                });
                stepCount = steps.length;
            } else {
                alert('至少需要保留一个审批步骤');
            }
        });
    });
});
</script>
{% endblock %}